<template>
  <div class="tabs-pane-item3">
    <div class="creative-top">
      <el-form :inline="true" :model="queryInfo">
        <el-form-item label="按效果">
          <el-select v-model="queryInfo.dimension" size="mini" @change="getCreativeData">
            <el-option label="花费" value="spend"></el-option>
            <el-option label="曝光" value="impressions"></el-option>
            <el-option label="点击" value="clicks"></el-option>
            <el-option label="安装" value="install"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="按维度">
          <el-select v-model="queryInfo.sort" size="mini" @change="getCreativeData">
            <el-option label="效果最好" :value="1"></el-option>
            <el-option label="效果最差" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="creativeData.length>0" class="creative-body">
      <creative-item v-for="item in creativeData" :key="item.shortId" :creative-data="item" @click="showDetailDialog"
                     :keywords="queryInfo.dimension"></creative-item>
    </div>
    <div v-else class="empty">暂无数据</div>
    <creative-card-preview v-model="isShowPreview" :media-preview="currentCreative"></creative-card-preview>
  </div>
</template>

<script>
import CreativeItem from "@/views/dataReport/review-report/components/CreativeItem";
import {queryReviewReportByCreative} from "@/api/dataReport/review-report";
import CreativeCardPreview from "@/components/CreativeCardPreview/CreativeCardPreview";

export default {
  name: "CreativeReport",
  components: {
    CreativeItem,
    CreativeCardPreview
  },
  props: {
    reportId: {
      type: Number | String,
      required: true
    }
  },
  created() {
    this.getCreativeData()
  },
  data() {
    return {
      queryInfo: {
        dimension: 'spend',
        sort: 1
      },
      creativeData: [],
      isShowPreview: false,
      currentCreative: {
        type: 0
      }
    }
  },
  methods: {
    async getCreativeData() {
      const {data: res} = await queryReviewReportByCreative(Object.assign(this.queryInfo, {reportId: this.reportId})).catch(err => err)
      if (res.code !== 200) return
      this.creativeData = res.data
      console.log(res)
    },
    showDetailDialog(data) {
      this.currentCreative = data
      this.isShowPreview = true
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-pane-item3 {
  .creative-top {

  }

  .creative-body {
    display: grid;
    //justify-content: space-between;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 25px 25px;
  }

  .empty {
    width: 100%;
    padding: 12px 0;
    text-align: center;
    color: #aaa;
  }
}
</style>
